<template>
	<view>
		<l-painter isCanvasToTempFilePath @success="onSuccess" hidden
			css="width: 750rpx; padding-bottom: 40rpx; background: linear-gradient(,#ff971b 0%, #ff5000 100%)">
			<l-painter-image v-if="userInfo&&userInfo.avatar" :src="userInfo.avatar"
				css="margin-left: 40rpx; margin-top: 40rpx; width: 84rpx;  height: 84rpx; border-radius: 50%;" />
			<l-painter-view v-if="userInfo.nickname" css="margin-top: 40rpx; padding-left: 20rpx; display: inline-block">
				<l-painter-text :text="userInfo.nickname"
					css="display: block; padding-bottom: 10rpx; color: #fff; font-size: 32rpx; fontWeight: bold" />
				<l-painter-text text="给你分享了一个动态" css="color: rgba(255,255,255,.7); font-size: 24rpx" />
			</l-painter-view>
			<l-painter-view
				css="margin-left: 40rpx; margin-top: 30rpx; padding: 32rpx; box-sizing: border-box; background: #fff; border-radius: 16rpx; width: 670rpx; box-shadow: 0 20rpx 58rpx rgba(0,0,0,.15)">
				<l-painter-image :src="coverImg"
					css="object-fit: cover; object-position: 50% 50%; width: 606rpx; height: 606rpx; border-radius: 12rpx;" />
				<l-painter-view css="margin-top: 30rpx">
					<l-painter-text css="line-clamp: 2; color: #333333; line-height: 1.8em; font-size: 36rpx;" :text="contentText"></l-painter-text>
				</l-painter-view>
				<l-painter-view css="margin-top: 30rpx">
					<l-painter-text
						css="color: #333333; line-height: 1.8em; font-size: 32rpx; width: 478rpx; padding-right:32rpx;color:#616161; box-sizing: border-box"
						text="一个好玩有趣的校园社区,微信扫一扫发现更多新鲜事"></l-painter-text>
					<!-- <l-painter-qrcode css="width: 128rpx; height: 128rpx;" text="limeui.qcoon.cn"></l-painter-qrcode> -->
					<l-painter-image :src="qrCodeImg" css="object-fit: cover; width: 128rpx; height: 128rpx;" />
				</l-painter-view>
			</l-painter-view>
		</l-painter>
	</view>
</template>

<script>
	export default {
		name: "q-post-share",
		props: {
			coverImg: String,
			qrCodeImg: String,
			contentText: String
		},
		data() {
			return {};
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo
			}
		},
		methods: {
			onSuccess(val) {
				this.$emit('success', val)
			}
		}
	}
</script>

<style lang="scss">

</style>